在openlayers中我們可以使用API提供的OSM，也可以額外依照需求設定自己的圖磚路徑

下面是內政部國土測繪中心提供的wmts圖磚連結，我們可以更換source切換到自己的圖磚資源

可以依照需求至國土測繪中心查詢使用此資源
https://maps.nlsc.gov.tw/S09SOA/

const map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            // 換上自己想要的圖磚路徑
            // source: new ol.source.OSM()
            source: new ol.source.XYZ({
                url: "https://wmts.nlsc.gov.tw/wmts/EMAP5/default/EPSG:3857/{z}/{y}/{x}.png"
            })
        })
    ],
    target: 'map',
    view: new ol.View({
        projection: "EPSG:3857",
        center: ol.proj.fromLonLat([120.846642, 23.488793]),
        zoom: 7.5,
        maxZoom: 20,
        minZoom: 5,
        enableRotation: false,
    }),
    controls: []
});

參考連結

https://github.com/weijung0923/learning-openlayers-micromastery/tree/day05